<template>
  <div class="home-container">
    <el-container>
      <!-- header -->
      <el-header>
        <el-row>
          <el-col :span="5" class="col-centered">
            <el-text class="mx-1 text-centered" size="large" style="margin-right: 20px;">IOT</el-text>
            <el-text class="mx-1" size="small" style="cursor: pointer; color: #fff;" @click="player">轻松一刻</el-text>
          </el-col>
          <el-col :offset="12" :span="7" style="min-width: 150px">
            <el-dropdown style="float: right; margin: 20px 10px">
              <span class="el-dropdown-link" style="color: #fff; cursor: pointer">
                {{ username }} &nbsp;&nbsp; <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="getLogout">退出系统</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-avatar shape="square" :src="avatar" style="margin: 10px; float: right"></el-avatar>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px" class="aside no-select">
          <div class="toggle-button" @click="isCollapse = !isCollapse">
            <el-icon :size="20">
              <Expand v-if="isCollapse" />
              <Fold v-if="!isCollapse" />
            </el-icon>
          </div>
          <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-sub-menu index="0" class="home-title" @click="() => router.push({ path: '/about' })">
              <template #title>
                <el-icon>
                  <HomeFilled />
                </el-icon>
                <span>首 页</span>
              </template>
            </el-sub-menu>
            <el-sub-menu index="1" @click="() => router.push({ path: '/device' })">
              <template #title>
                <el-icon>
                  <Tools />
                </el-icon>
                <span>设备管理</span>
              </template>
            </el-sub-menu>
            <el-sub-menu index="2" @click="() => router.push({ path: '/projects' })">
              <template #title>
                <el-icon>
                  <Histogram />
                </el-icon>
                <span>数据报表</span>
              </template>
            </el-sub-menu>
            <el-sub-menu index="3" @click="() => router.push({ path: '/realtime' })">
              <template #title>
                <el-icon>
                  <TrendCharts />
                </el-icon>
                <span>实时数据</span>
              </template>
            </el-sub-menu>
            <el-sub-menu index="4" @click="() => router.push({ path: '/screen' })">
              <template #title>
                <el-icon>
                  <Platform />
                </el-icon>
                <span>投屏界面</span>
              </template>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main class="main" style="min-width: 760px;">
            <section>
              <router-view v-slot="{ Component }">
                <transition name="slide-fade" mode="out-in">
                  <div :key="route.path">  
                    <component :is="Component"></component>
                  </div>
                </transition>
              </router-view>
            </section>
          </el-main>
          <el-footer>Copyright © 2024 IOT</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref } from 'vue';
import { logout } from '../api/index'

let isCollapse = ref(false);
const router = useRouter();
const route = useRoute();
const avatar = ref("");
let username = window.sessionStorage.getItem("username");
const getLogout = () => {
  window.sessionStorage.removeItem('token');
  router.push("/login");
};
const player = () =>{
  router.push("/player")
}

</script>
 
<style scoped>
.home-container {
  position: absolute;
  height: 100%;
  top: 0px;
  left: 0px;
  width: 100%;
  background: #f2f3f5;
}

.el-header {
  background: #2661ef;
  padding: 0 10px;
  overflow: hidden;
}
.col-centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-centered {
  text-align: right;
  color: #fff;
  font-size: 18px;
}

.el-aside {
  background: white;
  width: auto !important;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-footer {
  color: #cccccc;
  text-align: center;
  line-height: 60px;
}

.el-footer:hover {
  color: #2661ef;
}

.toggle-button {
  background-color: #d9e0e7;
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  color: black;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-item.is-active {
  color: #fff !important;
  font-size: 15px;
  font-weight: bold;
  background-color: #2661ef !important;
  border-radius: 2px;
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  margin: 2px 5px 0px 2px;
}

:deep(.el-sub-menu__icon-arrow) {
  display: none;
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

</style>